<template>
  <div id="PositionList">
    <div class="div_title">
      职位筛选
    </div>
    <el-row class="el_row_name">
      <el-col :span="6" class="p_selectPosition">
        <p>{{selectPositionName.One}}</p>
      </el-col>
      <el-col :span="7" class="p_selectPosition">
        <p>{{selectPositionName.Two}}</p>
      </el-col>
      <el-col :span="6" class="p_selectPosition">
        <p>{{selectPositionName.Thr}}</p>
      </el-col>
      <el-col :span="4" style="float:right">
        <el-button type="primary" @click="selectPosition()">完成选择</el-button>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="8">
        <el-menu mode="vertical" default-active="1" class="el_menu_height">
          <el-menu-item v-for="(item,index) in positionListRank.One" :key="index" :index="item.id"
                        @click="getPositionRankOne(item.id,item.position_name)">
            <p style="font-size:10px;line-height:30px;">{{item.position_name}}</p>
          </el-menu-item>
        </el-menu>
      </el-col>
      <el-col :span="8" class="el_col_border">
        <el-menu mode="vertical" default-active="1" class="el_menu_height">
          <el-menu-item v-for="(item,index) in positionListRank.Two" :key="index" :index="item.id"
                        @click="getPositionListRankTwo(item.id,item.position_name)">
            <p style="font-size:10px;line-height:30px;">{{item.position_name}}</p>
          </el-menu-item>
        </el-menu>
      </el-col>
      <el-col :span="8">
        <el-menu mode="vertical" default-active="1" class="el_menu_height">
          <el-menu-item v-for="(item,index) in positionListRank.Thr" :key="index" :index="item.id">
            <p style="font-size:10px;line-height:30px;" @click="getPositionName(item.position_name)">
              {{item.position_name}}</p>
          </el-menu-item>
        </el-menu>
      </el-col>
    </el-row>
  </div>
</template>
<script>
  import { postDataToServer } from '../../assets/js/post.js'

  export default {
    data () {
      return {
        selectPositionName: {
          One: '',
          Two: '',
          Thr: ''
        },//显示第三级的名字
        positionListRank: {
          One: [],
          Two: [],
          Thr: []
        },//存储一、二、三级的列表
      }
    },
    created () {
      this.getPosition()
    },
    methods: {
      //获取一级菜单
      getPosition () {
        let _this = this
        let pramas = new Object()
        pramas.rank = '0'
        postDataToServer('POSTITION_LISTALL', pramas).then((data) => {
          if (data.status === 0) {
            this.positionListRank.One = data.data_list

          }
        })
      },
      //获取二级菜单,存第一级选择类别，初始化第二、三级名字和列表
      getPositionRankOne (ID, name) {
        this.selectPositionName.One = name
        this.selectPositionName.Two = ''
        this.selectPositionName.Thr = ''
        this.positionListRank.Two = []
        this.positionListRank.Thr = []
        let _this = this
        let pramas = new Object()
        pramas.id = ID
        postDataToServer('POSITION_LISTALLBYID', pramas).then((data) => {
          if (data.status === 0) {
            this.positionListRank.Two = data.data_list

          }
        })
      },
      //获取三级菜单,存第二级选择类别，初始化第三级名字和列表
      getPositionListRankTwo (ID, name) {
        this.selectPositionName.Two = name ,
          this.selectPositionName.Thr = '',
          this.positionListRank.Thr = []
        let _this = this
        let pramas = new Object()
        pramas.id = ID
        postDataToServer('POSITION_LISTALLBYID', pramas).then((data) => {
          if (data.status === 0) {
            this.positionListRank.Thr = data.data_list
          }
        })
      },
      //存储职业
      getPositionName (name) {
        this.selectPositionName.Thr = name
      },
      //发送职业
      selectPosition () {
        if (this.selectPositionName.Thr === '') {
          this.$message({
            message: '未选中职位！',
            type: 'warning'
          })
        } else {
          this.$emit('positionName', this.selectPositionName)
        }

      }
    },
  }
</script>
<style scoped>
  li, p {
    height: 30px;
  }

  .p_name {
    font-size: 10px;
    margin: 10px;
    cursor: pointer;
  }

  .p_name:hover {
    color: red;
  }

  .el_col_border {
    border-left: 1px solid white;
    border-right: 1px solid white;
  }

  .p_selectPosition {
    border: 1px solid #2a6cc1;
    font-size: 14px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    margin: 2px;
  }

  .el_row_name {
    padding: 10px;
  }

  .el_menu_height {
    height: 450px;
    overflow-y: scroll;
  }
</style>

